<template>
  <div v-if="flag">
    <button
      :class="{
        n: type === 'n',
        success: type === 'success',
        info: type === 'info',
        warning: type === 'warning',
        danger: type === 'danger',
        normal: size === 'normal',
        mini: size === 'mini',
        small: size === 'small',
        medium: size === 'medium',
      }"
      :style="{ backgroundColor: color }"
    >
      <span
        ><slot>按钮</slot>&nbsp;&nbsp;&nbsp;<span @click="flag = !flag"
          >x</span
        ></span
      >
    </button>
  </div>
</template>
<script>
/* 
根据传递过来的size指定不同的样式
一次会生成一个对应的标签,标签内文字为插槽传递过来的
可以点击x关闭对应的标签
*/
export default {
  name: "",
  data() {
    return {
      flag: true,
    };
  },
  props: {
    type: {
      type: String,
      default: "n",
    },
    color: {
      type: String,
    },
    size: {
      type: String,
      default: "normal",
    },
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
button {
  width: 100px;
  height: 40px;
  border-radius: 20px;
}
.n {
  background-color: rgb(2, 2, 255, 0.2);
  span {
    color: rgb(0, 0, 63);
  }
}
.success {
  background-color: rgb(7, 255, 7, 0.5);
  span {
    color: rgb(7, 102, 7);
  }
}
.info {
  background-color: rgb(128, 128, 128, 0.5);
  span {
    color: rgb(0, 0, 0);
  }
}
.warning {
  background-color: rgba(255, 166, 0, 0.5);
  span {
    color: rgba(255, 166, 0);
  }
}
.danger {
  background-color: rgba(255, 0, 0, 0.5);
  span {
    color: rgba(255, 0, 0);
  }
}
.normal {
  width: 200px;
  height: 80px;
}
.medium {
  width: 150px;
  height: 60px;
}
.small {
  width: 100px;
  height: 40px;
}
.mini {
  width: 50px;
  height: 20px;
}
</style>
